<template>
  <div>
    <!-- <div style="display: flex;justify-content: end;"> -->
    <el-form :model="conditionForm" :inline="true" class="conditionForm">
      <!-- <el-row type="flex" align="middle" justify="space-between" class="condition">
        <el-col :span="6" class="button-col-lf"> -->
      <el-form-item>
        <el-button type="primary" @click="exportItems" icon="el-icon-download" size="medium"
          class="queryButton">选择导出</el-button>
        <el-button type="primary" @click="exportFile" icon="el-icon-download" size="medium"
          class="queryButton">全部导出</el-button>
      </el-form-item>

      <!-- </el-col> -->
      <!-- <el-col :span="4"> -->
      <!-- <el-form-item label="操作类型:">
          <el-input v-model="conditionForm.transactionType" placeholder="操作类型" clearable size="medium"
            class="inputNormal" />
        </el-form-item> -->
      <!-- </el-col> -->
      <!-- <el-col :span="18" style="display: flex;justify-content: flex-end;"> -->
      <el-form-item label="事务处理时间:">
        <el-date-picker v-model="conditionForm.dateTimes" type="datetimerange" range-separator="至"
          start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']" size="medium" />
      </el-form-item>
      <el-form-item v-if="accountFlag" label="账户:">
        <el-input v-model="conditionForm.account" placeholder="账户" clearable size="medium" class="inputNormal" />
      </el-form-item>
      <el-form-item v-else label="事务处理类型:">
        <el-input v-model="conditionForm.transactionType" placeholder="类型名称" clearable size="medium" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" icon="el-icon-search" size="medium">查询</el-button>
        <el-button type="text" @click="moreQuery" size="medium">更多查询</el-button>
      </el-form-item>

      <!-- </el-col> -->
      <!-- </el-row> -->
      <!-- <div id="outExcel"></div> -->
    </el-form>
    <!-- </div> -->
    <el-drawer :visible.sync="drawerShow" :direction="direction" :before-close="handleClose" :append-to-body="true"
      :size="560" :show-close="false">
      <template slot="title">
        <el-row type="flex" justify="space-between">
          <el-col :span="12">
            <i class="el-icon-close" @click="handleClose"></i>
          </el-col>
          <el-col :span="12" style="display: flex;justify-content: flex-end;">
            <el-button size="mini" @click="handleClose">取消</el-button>
            <el-button type="primary" size="mini" @click="handleConfirm">确定</el-button>
          </el-col>
        </el-row>
      </template>
      <el-form :model="conditionForm" style="padding: 20px;">
        <el-form-item label="组织代码:">
          <el-input v-model="conditionForm.orgCode" placeholder="组织代码" clearable size="medium" />
        </el-form-item>
        <el-form-item label="事务处理时间:">
          <el-date-picker v-model="conditionForm.dateTimes" type="datetimerange" range-separator="至"
            start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']" size="medium" />
        </el-form-item>
        <el-form-item label="事务处理类型:">
          <el-select v-model="conditionForm.transactionType" clearable placeholder="请选择">
            <el-option v-for="item in trTypeDict" :key="Object.keys(item)[0]" :label="Object.values(item)[0]"
              :value="Object.keys(item)[0]">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="来源:">
          <el-input v-model="conditionForm.source" placeholder="来源渠道名称" clearable size="medium" />
        </el-form-item>
        <el-form-item label="物料编码:">
          <el-input v-model="conditionForm.materialCode" placeholder="物料编码" clearable size="medium" />
        </el-form-item>
        <el-form-item v-if="accountFlag" label="账户:">
          <el-input v-model="conditionForm.account" placeholder="账户" clearable size="medium" />
        </el-form-item>
      </el-form>

    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
// import { exportExcel } from '@/utils/excel';
// import { getExcel1 } from '@/requests/api/purchase-receipt';
// import { downloadFile } from '@/utils/excel';
import { onMounted, reactive, ref } from 'vue';
import { useDownCsv } from '@/hooks/useDownCsv';
import { getExcelAll, queryTransactionTypeDictData } from '@/requests/api/transcation-query-service';

defineProps({
  accountFlag: {
    type: Boolean,
    default: false
  }
})
export interface SelectCondition {
  transactionType?: string;
  orgCode?: string;
  // sourceCode?: string;
  startTime?: string,
  endTime?: string
  // dateTimes?: Array<string>;
  account?: string,
  materialCode?: string,
  source?: string
}
export interface ExportParams {
  organizationCode?: string;
  transactionType?: string;
  transactionProcessTime?: Array<string>;
}

const conditionForm = reactive({
  transactionType: '',
  orgCode: '',
  dateTimes: [],
  account: "",
  materialCode: "",
  source: ""
})
const onSubmit = () => {
  emit('setCondition', conditionForm);
}

const emit = defineEmits(['setCondition', 'exportItems'])
const exportItems = () => {
  // exportExcel("入库明细.xlsx")
  emit('exportItems');
}
// const { exportParams, exportFile } = useDownCsv(getExcel1)
// const { exportFile } = useDownCsv(getExcel1)
const { exportFile } = useDownCsv(getExcelAll, '', conditionForm)
const drawerShow = ref(false)
const direction = ref("rtl")
const moreQuery = () => {
  drawerShow.value = true
}
const handleClose = () => {
  drawerShow.value = false
}
const handleConfirm = () => {
  drawerShow.value = false;
  emit('setCondition', conditionForm);
}
const trTypeDict = ref([{}]);
onMounted(async () => {
  const res = await queryTransactionTypeDictData();
  if (res && res.data) {
    trTypeDict.value = res.data;
    console.log('事务处理类型', trTypeDict.value)
  }
})
</script>
<style lang="scss" scoped>
/**

*/
.conditionForm {
  margin-top: 10px;
}

.inputNormal {
  width: 180px;
}

// .condition .el-col {
//   height: 70px;
// }

// .button-col {
//   display: flex;
//   justify-content: right;
//   height: 62px;

//   .el-button {
//     height: 36px;
//   }
// }
.button-col-lf {
  @include button-col;
  justify-content: left;
}

.button-col-rt {
  @include button-col;
  justify-content: right;
}

.el-form-item {
  // display: flex;
  // align-items: center;
  margin-left: 10px;
}

// .queryButton {
//   margin-left: 10px;
// }
</style>
